<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/regin_new.css">
    <link rel="icon" href="pict/login.png" sizes="16x16">

</head>
<body>
<div class="container">
    <div class="box">
        <!--        注册-->
        <form id="reg-form" action="/OurWebsite/registerServlet" method="post" class="register" >
            <h1>register</h1>
            <div id="username_err">${register_msg}</div>
            <input name="username" type="text" id="username_reg"  placeholder="输入用户名或邮箱">
            <input name="password" type="password" id="password_reg" placeholder="密码">
            <input name="password1" type="password" id="password1" placeholder="确定密码">
            <input name="checkCode" type="text" id="checkCode" placeholder="输入验证码">
            <img id="checkCodeImg_reg" src="/OurWebsite/checkCodeServlet" onclick="">
            <a href="#" id="changeImg_reg">看不清？</a>
            <button id="but1">Sign up</button>
        </form>
        <!--        登录-->
        <form action="/OurWebsite/loginServlet" class="login hidden" id="form">

            <h1>login</h1>
            <div id="errorMsg">${login_msg} ${register_msg}</div>
            <input type="text" placeholder="用户名" id="username_log" name="username" value="${cookie.username.value}">
            <input type="password" placeholder="密码" id="password_log" name="password" value="${cookie.password.value}">
            <input id="code" name="code" type="text" placeholder="输入验证码">
            <input id="remember" name="remember" value="1" type="checkbox">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
            <img id="checkCodeImg_log" src="/OurWebsite/checkCodeServlet" onclick="">
            <a href="#"  id="changeImg_log">看不清？</a>
            <button id="but2">Sign in</button>
        </form>
    </div>
    <div class="boxmove left">
        <h1>注册</h1>
        <p>
            <img src="http://bpic.588ku.com/element_origin_min_pic/18/07/23/e166cd3b9d4a89c991881e41289502fe.jpg" height="170" width="220">
        </p>
        <p>快点加入我们吧！</p>
        <span>已有账号</span>
        <button id="registercover">登录</button>
    </div>
    <div class="boxmove right">
        <p>欢迎加入</p>  <span>筑梦空间</span>
        <p>
            <img src="pict/login.png" height="170" width="220"/>
        </p>
        <br>
        <p>进行登录</p>
        <p>开启新时间的大门</p>
        <span>没有账号?</span><button id="logincover">注册</button>
    </div>
</div>
<script>
    var login=document.getElementById("logincover");
    var register=document.getElementById("registercover");
    var box=document.getElementsByClassName("box")[0];
    var register_left=document.getElementsByClassName("register")[0];
    var login_right=document.getElementsByClassName("login")[0];
    register.addEventListener('click',()=>{
        box.style.transform='translateX(0%)';
        login_right.classList.remove('hidden');
        register_left.classList.add('hidden');
    })
    login.addEventListener('click',()=>{
        box.style.transform='translateX(80%)';
        register_left.classList.remove('hidden');
        login_right.classList.add('hidden');
    })
    document.getElementById("changeImg_log").onclick = function (){

        document.getElementById("checkCodeImg_log").src = "/OurWebsite/checkCodeServlet?" + new Date().getMilliseconds();
    }

    document.getElementById("checkCodeImg_log").onclick = function (){

        document.getElementById("checkCodeImg_log").src = "/OurWebsite/checkCodeServlet?" + new Date().getMilliseconds();
    }
    document.getElementById("changeImg_reg").onclick = function (){

        document.getElementById("checkCodeImg_reg").src = "/OurWebsite/checkCodeServlet?" + new Date().getMilliseconds();
    }
    document.getElementById("checkCodeImg_reg").onclick = function (){

        document.getElementById("checkCodeImg_reg").src = "/OurWebsite/checkCodeServlet?" + new Date().getMilliseconds();
    }
</script>
</body>
</html>